<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        padding: 50px;
        background-color: green;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <!-- 
      Vue3 与 Vue2 中 v-model 针对表单元素的展开形式如下：
        语法糖：
          v-model="msg"
        展开形式：
          v-bind:value="msg"
          v-on:input="msg = $event.target.value"

        如果是 checkbox radio select
          v-bind:checked="msg"
          v-on:change="msg = $event.target.checked"

      v-model使用在组件上时，Vue3 和 Vue2 有不同

        Vue2:
          v-bind:value="msg"
          v-on:input="msg = $event.target.value"

        Vue3
          v-bind:modelValue="msg"
          v-on:update:modelValue="msg = $event.target.value"

     -->
    <div id="app">
      <input type="text" :value="msg" @input="msg = $event.target.value" />
      <input type="text" v-model="msg" />

      <div>Selected: {{ selected }}</div>

      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option value="001">北京</option>
        <option value="002">上海</option>
        <option value="003">深圳</option>
      </select>

      <input
        type="checkbox"
        v-model="toggle"
        true-value="yes"
        false-value="no"
      />
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: "我的天",
            selected: "",

            toggle: "yes",
          };
        },
        methods: {
          onInput(event) {
            console.log(event.target.value);
            this.msg = event.target.value;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
